<template>
  <!--  荣誉橱窗 -->
  <section class="pdt-2">
    <fetchData v-if="isLoading" :loading="isLoading" :data="swipeData"></fetchData>
    <div class="demo-honor"  v-if="swipeData.length>0">
      <template v-for="(item,index) in swipeData">
<!--        <div @touchstart="longPress" @touchend="removePress(item,index)" class="item" v-if="item.id">-->
        <div class="item" v-if="item.id" @touchstart.prevent.stop="gtouchstart(item,index)" @touchend.prevent.stop="gtouchend(item,index)" :src="getPoster(item)">
          <div class="honor-wrap con">
            <!--                <img v-if="!item.honorPic" src="../../../../../static/images/dangjian/home/more-video-cover.jpg" alt="">-->
            <img :src="getPoster(item)" alt="">
            <div class="subscript" v-show="item.level">{{getLevel(item)}}
            </div>
          </div>
        </div>
        <div class="item" v-else="">
          <div class="content-null">
          </div>
        </div>
        <div v-if="index%2 !== 0" class="bracket"></div>
        <div v-if="index%2 == 0 && index+1==swipeData.length"  class="bracket"></div>
      </template>
    </div>
    <div class="text-center no-data" :loading="isLoading" v-if="!isLoading && swipeData.length===0">
      <img src="../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
    </div>
  </section>
</template>

<script>
var timeOutEvent = 0; //定时器
  /**
   * 首页banner 分为活动的及固定的
   * 活动的通过接口获取，固定的与后台约定栏目ID主动获取
   */
  export default {
    name: 'honorComponent',
    props:['partyGroupId'],
    data () {
      return {
        swipeData:[],
        pageIndex: 1,
        pageSize: 1000,
        isLoading:false,
        userInfo:'',
        touchstartTime:'',
        touchendTime:'',
        duration:'',
        maintainable:'',
      }
    },
    created () {
      this.maintainable = this.$store.state.maintainable;
      this.userInfo = this.$localStorage.get("userInfo");
      this.honorData()
    },
    methods: {
      //开始按
      gtouchstart(item,index){
        clearTimeout(timeOutEvent);//清除定时器
        var self = this;
        timeOutEvent = setTimeout(function(){
          timeOutEvent = 0
          if (self.maintainable === '2') {
            // self.alertDialog(item, index, self.swipeData);
            this.showImagePreview(item);
          }
        },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
        return false;
      },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
      gtouchend(item,index){
        clearTimeout(timeOutEvent);//清除定时器
        if(timeOutEvent!=0){
          //这里写要执行的内容（尤如onclick事件）
          this.showImagePreview(item);
        }
        return false;
      },
      //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      gtouchmove(){
        clearTimeout(timeOutEvent);//清除定时器
        timeOutEvent = 0;
      },
      // 删除地址，长按开始
      longPress () {
        this.touchstartTime = new Date().getTime()
      },
      // 删除地址，长按结束
      removePress (item,index) {
        this.touchendTime = new Date().getTime()
        this.duration = this.touchendTime - this.touchstartTime
        if (this.duration >= 1000 && this.maintainable === '2') {
          //删除事件
          // this.alertDialog(item, index, this.swipeData);
        }
      },
      //询问删除
      alertDialog(item, index, data) {
        let _this = this;
        this.$createDialog({
          type: "confirm",
          icon: "",
          title: "温馨提示",
          content: "确定删除吗？",
          confirmBtn: {
            text: "确定",
            active: true,
            disabled: false,
            href: "javascript:;",
          },
          cancelBtn: {
            text: "取消",
            active: false,
            disabled: false,
            href: "javascript:;",
          },
          onConfirm: () => {
            clearTimeout(timeOutEvent);//清除定时器
            _this.deleteConferee(item, index, data);
          },
          onCancel: () => {},
        }).show();
      },
      deleteConferee(item, index, data) {
        // this.tools.showLoading();
        let date ={
          ids:[item.id]
        }
        this.fetchService.honor_deleteMultiple(date).then((res) => {
          // this.tools.hideLoading();
          if (res.code !== 0) {
            return this.tools.tip(res.message);
          }
          // data.splice(index, 1);//因为可能会出现排列问题，所以不清除某一个样式
          this.pageIndex =1
          this.swipeData =[]
          this.honorData()
          this.tools.tip("删除成功");
        });
      },
      getLevel(data){
        if(data.level===1){
          return '国家级'
        }else if(data.level===2){
          return '省(部)级'
        }else if(data.level===3){
          return '厅(局)级'
        }else if(data.level===4){
          return '地(市)级'
        }else if(data.level===5){
          return '市(县)以下'
        }
        return '其他'
      },
      getPoster (item) {
        if(this.tools.indexOfHttp(item.honorPicUrl)){
          return item.honorPicUrl
        }
        if(this.tools.indexOfHttp(item.imgOssUrl)){
          return item.imgOssUrl
        }
        return this.tools.getImgUrl(item.honorPic)
      },
      showImagePreview (item) {
        let imgs = [this.getPoster(item)]
        this.$createImgViewComponent({
          $props: {
            imgSrc: imgs[0],
            content: item.summary
          }
        }).show()
        return
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': true
            },
            domProps: {
              innerHTML: item.honorName
            },
            slot: 'header'
          }, '')
        }).show()
      },
      honorData () {
        console.log('this.userInfo',this.userInfo);
        let data = {
          pageNo: this.pageIndex,
          pageSize: this.pageSize,
          userId:this.userInfo.id
        }
        console.log('localUserId=', JSON.parse(localStorage.getItem('localUserId')))// 读取用户id
        this.isLoading = true
        this.fetchService.getPersonSysHonor(data).then((res) => {
          this.isLoading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          if (Array.isArray(res.data)&&this.swipeData.length>0 && !this.isHasFocus(this.swipeData[0].id,res.data)) {
            this.swipeData = this.swipeData.concat(res.data)
          }else{
            this.swipeData = res.data || []
          }
          let a= [],b= [],c= [],d= [],e = [],f =[]
          this.swipeData.forEach( (item,index) =>{
            if(item.level===1){
              a.push(item)
            }else if(item.level===2){
              b.push(item)
            }else if(item.level===3){
              c.push(item)
            }else if(item.level===4){
              d.push(item)
            }else if(item.level===5){
              e.push(item)
            }else {
              f.push(item)
            }

          })
          this.swipeData =[]
          if(a.length%2 !=0){
            a.push({
              id:null
            })
          }
          a.forEach( item=>{
            this.swipeData.push(item)
          })
          if(b.length%2 !=0){
            b.push({
              id:null
            })
          }
          b.forEach( item=>{
            this.swipeData.push(item)
          })
          if(c.length%2 !=0){
            c.push({
              id:null
            })
          }
          c.forEach( item=>{
            this.swipeData.push(item)
          })
          if(d.length%2 !=0){
            d.push({
              id:null
            })
          }
          d.forEach( item=>{
            this.swipeData.push(item)
          })
          if(e.length%2 !=0){
            e.push({
              id:null
            })
          }
          e.forEach( item=>{
            this.swipeData.push(item)
          })
          f.forEach( item=>{
            this.swipeData.push(item)
          })
          this.pageIndex ++
        })
      },
    },
  }
</script>

<style scoped>
  .con{
    height: 250px;
    width: 200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 100px;
    position: relative;
    background-color: #4cd964;
  }
  .subscript{
    left: -20PX;
    color: #fff;
    height: 23PX;
    width: 82PX;
    top: 10PX;
    position: absolute;
    text-align: center;
    line-height: 24PX;
    /* font-family: "\9ED1\4F53"; */
    font-size: 9PX;
    background-color: #ee0c0c;
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
  }
  p{
    font-size: 16PX;
  }
  .content-null{
    background-size: cover;
    width: 4.26667rem;
    height: 2.96rem;
    padding: 0.13333rem;
    margin: auto;
  }
  .demo-honor .item .honor-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
